<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>图书馆自修室预约系统</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="icon" href="favicon.ico" type="image/x-icon" />
		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="lib/sm.css">
    <link rel="stylesheet" href="lib/sm-extend.css">
    <link rel="stylesheet" href="lib/css/font-awesome.css">
		<link rel="stylesheet" href="lib/common.css" />
		<link rel="stylesheet" href="lib/mobile-style.css" />
  </head>
  <body class="login-page">
  	<div class="page-group">
  		<div class="page page-current">
  			<header class="bar bar-nav">
		  		<h1 class='title'>图书馆自修室预约</h1>
		  	</header>
		  	<div class="content content-padded">
		  		<p style="font-size: 1rem;margin: 0;color: #646363;"><i class="fa fa-map-marker"></i>&nbsp;<small>一楼自修室(周一至周日09:00~22:00)</small></p>
	  			<div>
	  				<!--有空闲座位时-->
	  				<p class="text-center" id="seatStatus">
	  					<a href="javascript:;"><small>剩余座位<span class="remainNum">55</span>个，点击下方选择座位</small></a>
	  				</p>
	  				<!--排队时-->
	  				<p class="text-center" id="queueStatus">
	  					<small>您的座位号是<span id="userNumber">0</span>，入座剩余时间：<a href="javascript:;"><i class="minutes">5</i>分<i class="seconds">0</i>秒</a></small>
	  				</p>
	  				<!--没有空闲座位时-->
	  				<p id="noEmptySeat" class="text-center" style="display: none;">
	  					<button type="button" class="btn btn-primary" id="startQueue">开始排队</button>
	  					<button type="button" class="btn btn-primary" id="queueNumber" style="display: none;">您排第1位</button>
	  				</p>
	  				<!--入座后-->
	  				<p id="seatLeave" class="text-center" style="display: none;">
	  					您的座位&nbsp;<span class="seatNumber">0</span>&nbsp;&nbsp;&nbsp;
	  					<button type="button" class="btn btn-danger" id="confirmLeave">确认离座</button>
	  				</p>
	  			</div>
		  		
		  		<div class="current-seat">
		  			<p>
		  				<i class="remain"></i><b>&nbsp;未座：<span class="remainNum">55</span></b>&nbsp;&nbsp;<i class="no-remain"></i><b>&nbsp;已座</b>
		  				<span class="pull-right"><small>扫一扫入座&nbsp;</small><span id="scanQRcode" class="icon icon-code"></span></span>
		  			</p>
		  		</div>
		  		<p class="text-center">
		  			<span class="enterance">入口</span>
		  		</p>
		  		<div class="seat-detail" id="seatDetail">
		  			
		  		</div>
		  	</div>
  		</div>
  	</div>
  	<script src='lib/zepto.js' charset='utf-8'></script>
  	<script src="lib/touch.js" charset="utf-8"></script>
    <script src='lib/sm.js' charset='utf-8'></script>
    <script src='lib/sm-extend.js' charset='utf-8'></script>
    <script src="./index.js" charset="utf-8"></script>
  </body>
</html>